<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
     <!DOCTYPE html>
<html>


<!-- Mirrored from www.gzsxt.cn/theme/hplus/table_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>办公系统 - 基础表格</title>
    <meta name="keywords" content="办公系统">
    <meta name="description" content="办公系统">

    <link rel="shortcut icon" href="favicon.ico"> 
    	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/select/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/plugins/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" href="layui/css/layui.css" />



</head>

<body class="gray-bg">
	<div class="wrapper2 wrapper-content2 animated fadeInRight">
	       <div class="row">
	    		<div class="col-sm-5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>添加角色</h5>
                    </div>
                    <div class="ibox-content">
                        <form id="roleForm" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色名称：</label>

                                <div class="col-sm-8">
                                    <input type="hidden" name="sourcesIds" id="sourcesIds">
                                    <input type="text" id="rolename" name="rolename" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色描述：</label>

                                <div class="col-sm-8">
                                    <input type="text" id="roledis" name="roledis" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色权限：</label>

                                <div class="col-sm-8">
                                     <ul id="treeDemo" class="ztree"> </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">是否启用：</label>
                                <div class="col-sm-8">
                                    <div class="switch">
                                        <input type="radio" name="status" value="0">禁用
                                        <input type="radio" name="status" value="1" checked>启用
			                        </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-8">
                                    <button class="btn btn-sm btn-white" type="button" id="btn"><i class="fa fa-save"></i>保存</button>
                                    <button class="btn btn-sm btn-white" type="button"><i class="fa fa-undo"></i> 重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
	    		<div class="col-sm-7">
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>角色列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="table-responsive">
                                <table id="roleTable" lay-filter="test"></table>
                                <script type="text/html" id="barDemo">
                                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                                </script>
                                <script type="text/html" id="toolbarDemo">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                                        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                                        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                                    </div>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
	    	</div>
	
	</div>       
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
     <script src="js/plugins/select/bootstrap-select.min.js"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="js/plugins/ztree/jquery.ztree.core.min.js"></script>
    <script src="js/plugins/ztree/jquery.ztree.exedit.js"></script>
    <script src="js/plugins/ztree/jquery.ztree.excheck.js"></script>
    <script src="layui/layui.js"></script>

    <script>
        var setting = {
            check: {
                enable: true
            },
            async: {
                enable: true,
                url: "${pageContext.request.contextPath}/sources/getRootSourcesByPid",
                autoParam: ["id", "name"]
            }
        };
        $(function(){
            $.fn.zTree.init($("#treeDemo"), setting);

            showRole();
            //给保存按钮添加点击事件
            $("#btn").click(function(){
                //获取所选中的菜单树资源
               // 获取我们的树
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                // 获取被选中的节点
                var nodes = treeObj.getCheckedNodes(true);
                if(0 === nodes.length) {
                    swal("请给当前角色添加资源!");
                    return;
                }
                //将所有的选中的组件的id使用字符串连接方式拼接成一个字符串
                var dataNodes = "";
                for(var i = 0; i < nodes.length; i++) {
                    dataNodes += nodes[i].id + ",";
                }
                dataNodes=dataNodes.substring(0,dataNodes.length-1);
                $("#sourcesIds").val(dataNodes);
                //发送异步请求
                $.ajax({
                    url:"${pageContext.request.contextPath}/role/addRole",
                    type:"post",
                    data:$("#roleForm").serialize(),
                    dataType:"json",
                    cache:false,
                    success:function(rs){
                        if(rs.status==200){
                            swal(rs.msg);
                            $("#roleForm")[0].reset();
                            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                            treeObj.reAsyncChildNodes(null, "refresh");
                            showRole();
                        }else if(rs.status==400){
                            swal(rs.msg);
                        }

                    }
                });
            });
        });

        function showRole(){
            //初始化layui
            layui.use('table',function(){
                var table = layui.table;
                //第一个实例
                table.render({
                    elem: '#roleTable'
                    ,height: 400
                    ,url: '${pageContext.request.contextPath}/role/getAllRoles' //数据接口
                    //,toolbar: 'default'
                    ,toolbar:"#toolbarDemo"
                    ,page: true //开启分页
                    ,limits:[5,10,15,20]
                    ,cols: [[ //表头
                        {type:'checkbox',fixed: 'left'}
                        ,{field: 'roleid', title: '编号', width:80, sort: true, fixed: 'left'}
                        ,{field: 'rolename', title: '角色名称', width:150}
                        ,{field: 'roledis', title: '角色描述', width:200}
                        ,{field: 'status', title: '状态', width:80,templet:function(value){

                                if(value.status==0){
                                    return "禁用";
                                }else{
                                    return "启用";
                                }

                            }}
                        ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                    ]]
                });

                /*
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'add':
                            layer.msg('添加');
                            break;
                        case 'delete':
                            layer.msg('删除');
                            break;
                        case 'update':
                            layer.msg('编辑');
                            break;
                    };
                });*/

                //头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：'+ data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;
                    };
                });

                table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        ,layEvent = obj.event; //获得 lay-event 对应的值
                    console.log(data);
                    if(layEvent === 'del'){
                        layer.confirm('真的删除行么', function(index){

                            //向服务端发送删除指令
                            $.ajax({
                                url:"${pageContext.request.contextPath}/role/deleteRoleByRoleid",
                                type:"post",
                                data:{"roleid":data.roleid},
                                dataType:"json",
                                cache:false,
                                success:function(rs){
                                    if(rs.status==200){
                                        obj.del(); //删除对应行（tr）的DOM结构
                                        layer.close(index);
                                    }else if(rs.status==400){
                                        swal(rs.msg);
                                    }
                                }
                            });
                        });
                    } else if(layEvent === 'edit'){
                        //转发到修改页面
                        window.location="${pageContext.request.contextPath}/pages/update-role.jsp?roleid="+data.roleid;
                    }
                });
            });
        }


    </script>

</body>


</html>
